import type { SoElements } from '../../../../../../../../types/constants/personalization/so'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SearchCommonStyles } from '../../common'
import { SoCommonPage } from './common'

export class SoEncyclopediaPage {
  elements: SoElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.SO]
  private static instance: SoEncyclopediaPage
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly searchCommonStyles: SearchCommonStyles = SearchCommonStyles.getInstance()
  private readonly commonPage: SoCommonPage = SoCommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): SoEncyclopediaPage {
    if (!SoEncyclopediaPage.instance) {
      SoEncyclopediaPage.instance = new SoEncyclopediaPage()
    }
    return SoEncyclopediaPage.instance
  }

  init(): void {
  }

  /**
   * 无搜索结果样式
   */
  noSearchResult(): string {
    return ``
  }

  getMainStyles(): string {
    return `
  .page-wrap {
    /* 避免侧边栏遮挡顶部菜单 */
    > div:has(> .so-header) {
      position: relative !important;
      z-index: ${AppStyleCollections.Search.value.Z_HEADER} !important;
    }

    .so-header {
      background-color: var(${this.themeVarService.search.header.background}) !important;
      padding: 16px 20px !important;
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      
      .so-header__content {
        width: fit-content !important;
        min-width: unset !important;
        
        .so-header__left {
          display: flex !important;
        }
      }
    }
    
    #login-part-tools {
      .so-header-menu {
        .so-header-menu-item__title {
          color: var(${this.themeVarService.search.default.text}) !important;
          
          &[id*=user-login] {
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }

          a {
            color: var(${this.themeVarService.search.default.text}) !important;
            
            &:hover {
              color: var(${this.themeVarService.link.default.text}) !important;
            }
          }
        }
      }
    }
    
    #g-hd {
      background-color: var(${this.themeVarService.search.header.background}) !important;
      
      .so-nav-container {
        ${this.commonPage.tabStyles()}
      }
    }
    
    
    #container {
      padding: 0 !important;

      #qaresult {
        width: 100% !important;
        
        .search-cont {
          width: 100% !important;
          
          .main {
            width: 100% !important;
            
            .f13 {
              text-align: center !important;
              color: var(${this.themeVarService.search.default.text}) !important;
            }
            
            /* 搜索结果列表 */
            .result {
              ${this.searchCommonStyles.resultContainerStyles()}
              margin-top: ${this.themeVarService.search.resultItem.gap} !important;
              margin-bottom: ${this.themeVarService.search.resultItem.gap} !important;
              padding-top: 0 !important;
              
              /* 非结果项 */
              .js-search-recommand {
                display: none !important;
              }
              
              /* 搜索结果项 */
              > li {
                ${this.searchCommonStyles.resultItemStyles()}
                margin-bottom: 0 !important;
                
                /* 标题 */
                h3 {
                  ${this.searchCommonStyles.titleStyles()}
                }
                
                /* 描述 */
                p.res-desc {
                  color: var(${this.themeVarService.search.default.text}) !important;
                  
                  b {
                    color: var(${this.themeVarService.em.text}) !important;
                  }
                }
                
                /* 其他人还在看*/
                .mod-recommond-center {
                  background-color: transparent !important;
                }
              }
            }
          }
          
          .to_haosou {
            text-align: center !important;
            
            a {
              color: var(${this.themeVarService.search.default.text}) !important;
            }
          }
        }
      }
      
      /* 相关搜索 */
      ${this.commonPage.relationStyles()}
    }
    
    #page {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    
    /* 页脚 */
    ${this.commonPage.footStyles()}
    #footer .wrap {
      width: 100% !important;
    }
  }
    
    `
  }
}
